<style>
  .demo-table-expand {
    font-size: 0;
    background: #dedfe0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #3714d1;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  
</style>

<template>
  <div>
    <el-table
    :data="list.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) ||
     data.shenfen.toLowerCase().includes(search.toLowerCase()) ||
     data.sex.toLowerCase().includes(search.toLowerCase()) || 
     data.phone.toLowerCase().includes(search.toLowerCase())
     ).slice((currentPage-1)*pagesize,currentPage*pagesize)"
        height="600"
         border
        style="width: 100%">
         

        <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item 
                prop="jiedata1"
                label="第一针接种日期">
                 <span>{{ props.row.jiedata1 }}</span>
            </el-form-item>
            <el-form-item 
                prop="jiedata2"
                label="第二次接种日期">
                 <span>{{ props.row.jiedata2 }}</span>
            </el-form-item>
            <el-form-item 
                prop="danwei"
                label="接种单位">
                 <span>{{ props.row.danwei }}</span>
            </el-form-item>
            <el-form-item 
                prop="vender"
                label="疫苗生产厂家">
                 <span>{{ props.row.vender }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
   
        <el-table-column 
        type="index"
        label="序号"
        width="50">  
      </el-table-column>

      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>

        <el-table-column
        label="性别"
        prop="sex">
      </el-table-column>

        <el-table-column
        label="年龄"
        prop="age">
      </el-table-column>
        <el-table-column
        label="身份证号码"
        prop="shenfen">
      </el-table-column>

        <el-table-column
        label="出生日期"
        prop="chudata">
      </el-table-column>

        <el-table-column
        label="电话号码"
        prop="phone">
      </el-table-column>

        <el-table-column
        label="户籍地址"
        prop="dizhi">
      </el-table-column>

      <el-table-column
        align="center" width="300">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, scope.row)"
          type="text"
          size="big">
          移除
        </el-button>
      </template>>
      </el-table-column>  
    </el-table>
        <div class="block" align="right">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20,50,100]"
                :total="list.length"
                :page-size="0"
                layout=" sizes,prev,pager,next,jumper">
            </el-pagination>
        </div>
   
  </div>
 
  
</template>

<script>
  export default {
    data() {
      return {
        list: [

        ],
        pagesize:6,
        currentPage: 1,

             search: ''
      }
    },
     created(){
        this.query();
      },
      methods:{
        //移除
         deleteRow(index, rows) {
           console.log(rows.id)
           this.$api_a.__api_list_delete(rows.id).then((response)=>{
              this.list.splice(index, 1);
           }).catch((error)=>{

           })
       
      },
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
         query(){
            this.$api_a.__api_list_userjiezhong(this.pager).then(data => {
            this.list = data;
            console.log(data);
          })
          
      }
   }
    
 }
</script>